<!--周建威-->
<!--2017/12/25-->
<template>
    <div >
        <el-row>
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" @submit.native.prevent>
                    <el-form-item style="float: right">
                        <el-button type="success" icon="el-icon-refresh" @click="handleApply()">应用</el-button>
                        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="showAddForm">一级菜单
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <el-table :data="list" style="width: 100%" :expand-row-keys="[1,2,3]" id="firstLevel" row-key="menu_id">
            <el-table-column type="expand"  >
                <template slot-scope="props" v-if="props.row.type=='normal'">
                    <el-table :data="props.row.children" style="width: 100%" id="secondLevel">
                        <el-table-column type="index" width="50">
                        </el-table-column>
                        <el-table-column property="name" label="菜单名" >
                        </el-table-column>
                        <el-table-column property="type" label="类型" >
                        <span slot-scope="scope">
                            {{typeList[scope.row.type]}}
                         </span>
                        </el-table-column>
                        <el-table-column property="key" label="事件key">
                        </el-table-column>
                        <el-table-column property="sort" label="排序">
                        </el-table-column>
                        <el-table-column property="url" label="url">
                        </el-table-column>
                        <el-table-column  label="操作" align="center">
                            <span slot-scope="scope">
                                <el-button type="text" size="small" @click="handleDelete(scope.row.menu_id)">删除</el-button>
                                   <el-button type="text" size="small" @click="showEditForm(scope.row)" >编辑</el-button>
                            </span>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column property="name" label="菜单名" >
            </el-table-column>
            <el-table-column property="type" label="类型" >
                <span slot-scope="scope">
                    {{typeList[scope.row.type]}}
                </span>
            </el-table-column>
            <el-table-column property="key" label="事件key">
            </el-table-column>
            <el-table-column property="sort" label="排序">
            </el-table-column>
            <el-table-column property="url" label="url">
            </el-table-column>
            <el-table-column  label="操作" align="center">
                <span slot-scope="scope">
                     <el-button type="text" size="small" @click="showAddChild(scope.row)" v-if="scope.row.type=='normal'">添加下级</el-button>
                      <el-button type="text" size="small" @click="showEditForm(scope.row)" >编辑</el-button>
                     <el-button type="text" size="small" @click="handleDelete(scope.row.menu_id)">删除</el-button>
                </span>
            </el-table-column>
        </el-table>

        <!--新增start -->
        <el-dialog title="提示" :visible.sync="visible.addForm" width="500px">
            <div slot="title" class="dialog-title">
                新增菜单
            </div>
            <el-form :model="addForm" ref="addForm"  label-width="100px" @submit.native.prevent >
                <el-form-item label="菜单名" prop="name" :rules="[
                  {required: true, message: '菜单名', trigger: 'blur'},
                  {max: 5, message: '长度最多5个字符', trigger: 'blur'}
                  ]">
                    <el-input v-model="addForm.name"  placeholder="菜单名" ></el-input>
                </el-form-item>
                <el-form-item label="菜单类型" prop="type">
                    <el-select v-model="addForm.type"  placeholder="请选择" style="width: 120px">
                        <el-option
                                v-for="(value, key) in typeList" v-if="addForm.level==1"
                                :key="key"
                                :label="value"
                                :value="key">
                        </el-option>
                        <el-option
                                v-for="(value, key) in childTypeList" v-if="addForm.level==2"
                                :key="key"
                                :label="value"
                                :value="key">
                        </el-option>
                    </el-select><span  class="form-notice" v-if="addForm.level==1">只有普通菜单才能增加下级</span>
                </el-form-item>
                <el-form-item label="排序" prop="sort" >
                    <el-input-number v-model="addForm.sort"  :min="1" :max="255" label="排序"></el-input-number>
                </el-form-item>
                <el-form-item label="跳转url" prop="url" v-if="addForm.type=='view'" :rules="{required: true, message: '请输入url', trigger: 'blur'}">
                    <el-input v-model="addForm.url"  placeholder="跳转url"  ></el-input>
                </el-form-item>
                <el-form-item label="事件key" prop="key"  v-if="addForm.type=='click'" :rules="{required: true, message: '请输入key值', trigger: 'blur'}">
                    <el-input v-model="addForm.key"  placeholder="事件key"  ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="hideAddForm ">取 消</el-button>
            <el-button type="primary" @click="handleAdd()" :loading="visible.addLoading">确 定</el-button>
             </span>
        </el-dialog>
        <!--新增end -->


        <!--编辑start -->
        <el-dialog title="提示" :visible.sync="visible.editForm" width="500px">
            <div slot="title" class="dialog-title">
                新增菜单
            </div>
            <el-form :model="editForm" ref="editForm"  label-width="100px" @submit.native.prevent >
                <el-form-item label="菜单名" prop="name" :rules="nameRules">
                    <el-input v-model="editForm.name"  placeholder="菜单名" ></el-input>
                </el-form-item>
                <el-form-item label="菜单类型" prop="type">
                    <el-select v-model="editForm.type"  placeholder="请选择" style="width: 120px">
                        <el-option
                                v-for="(value, key) in typeList" v-if="editForm.level==1"
                                :key="key"
                                :label="value"
                                :value="key">
                        </el-option>
                        <el-option
                                v-for="(value, key) in childTypeList" v-if="editForm.level==2"
                                :key="key"
                                :label="value"
                                :value="key">
                        </el-option>
                    </el-select><span  class="form-notice">只有普通菜单才能增加下级</span>
                </el-form-item>
                <el-form-item label="排序" prop="sort" >
                    <el-input-number v-model="editForm.sort"  :min="1" :max="255" label="排序"></el-input-number>
                </el-form-item>
                <el-form-item label="跳转url" prop="url" v-if="editForm.type=='view'" :rules="{required: true, message: '请输入url', trigger: 'blur'}">
                    <el-input v-model="editForm.url"  placeholder="跳转url"  ></el-input>
                </el-form-item>
                <el-form-item label="事件key" prop="key"  v-if="editForm.type=='click'" :rules="{required: true, message: '请输入key值', trigger: 'blur'}">
                    <el-input v-model="editForm.key"  placeholder="事件key"  ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="visible.editForm = false  ">取 消</el-button>
            <el-button type="primary" @click="handleEdit()" :loading="visible.editLoading">确 定</el-button>
             </span>
        </el-dialog>
        <!--编辑end -->
    </div>
</template>
<script>
  import {getWeChatMenuList, addWeChatMenu, deleteMenu, editWeChatMenu} from '../../api/api'
  export default {
    data () {
      return {
        list: [],
        visible: {
          listLoading: false,
          addForm: false,
          addLoading: false,
          editForm: false,
          editLoading: false
        },
        typeList: {
          normal: '普通',
          click: '事件',
          view: '跳转'
        },
        childTypeList: {
          click: '事件',
          view: '跳转'
        },
        addForm: {
          type: '',
          name: '',
          url: '',
          key: '',
          parent_id: '',
          level: 1,
          sort: 1
        },
        editForm: {
          type: '',
          name: '',
          url: '',
          key: '',
          parent_id: '',
          level: 1,
          sort: 1,
          menu_id: 0
        }
      }
    },
    methods: {
      // 列表
      handleList () {
        getWeChatMenuList().then(res => {
          this.list = res.data;
        })
      },
      // 显示新增表单
      showAddForm () {
        if (this.list && this.list.length >= 3) {
          this.$alert('一级菜单最多只能有三个', '错误', {type: 'error'})
          return
        }
        this.visible.addForm = true
        this.addForm.type = 'normal'
      },
      // 处理新增
      handleAdd () {
        this.$refs['addForm'].validate(valid => {
          if (valid) {
            this.addLoading = true
            addWeChatMenu(this.addForm).then(res => {
              if (parseInt(res.status) === 1) {
                this.$message({message: '新增成功', type: 'success'});
                this.visible.addForm = false
                this.handleList()
                this.$refs['addForm'].resetFields()
              } else {
                this.$message({message: '新增失败', type: 'error'});
              }
              this.visible.addLoading = false
            })
          }
        })
      },
      // 删除
      handleDelete (id) {
        this.$confirm('确认要删除该菜单吗？', '提示', {}).then(() => {
          deleteMenu(id).then(res => {
            if (parseInt(res.status) === 1) {
              this.$message({message: '删除成功', type: 'success'})
              this.handleList()
            }
          })
        }, () => {})
      },
      // 隐藏新增表单
      hideAddForm () {
        this.visible.addForm = false
        this.$refs['addForm'].resetFields()
      },
      // 显示新增下级
      showAddChild (menu) {
        if (menu.children.length >= 7) {
          this.$alert('二级菜单最多只能有七个', '错误', {type: 'error'})
          return
        }
        this.addForm.type = 'click'
        this.addForm.parent_id = menu.menu_id
        this.addForm.level = 2;
        this.visible.addForm = true
      },
      // 显示编辑
      showEditForm (menu) {
        this.editForm.type = menu.type
        this.editForm.name = menu.name
        this.editForm.url = menu.url
        this.editForm.key = menu.key
        this.editForm.parent_id = menu.parent_id
        this.editForm.level = menu.level
        this.editForm.sort = menu.sort
        this.editForm.menu_id = menu.menu_id
        this.visible.editForm = true
      },
      // 处理编辑
      handleEdit () {
        if (this.editForm.type === 'normal') {
          this.editForm.url = ''
          this.editForm.key = ''
        }
        if (this.editForm.type === 'click') {
          this.editForm.url = ''
        }
        if (this.editForm.type === 'view') {
          this.editForm.key = ''
        }
        // 编辑处理
        editWeChatMenu(this.editForm).then(res => {
          if (parseInt(res.status) === 1) {
            this.$message({message: '编辑成功', type: 'success'})
            this.visible.editForm = false
            this.handleList();
          }
        })
      },
      // 应用菜单到微信公众号
      handleApply () {
        this.$confirm('确认要应该该菜单到公众号吗？', '提示', {}).then(() => {
          addWeChatMenu({apply: true}).then(res => {
            if (parseInt(res.status) === 1) {
              this.$message({message: '设置成功', type: 'success'})
            } else {
              this.$alert(res.errorMsg, '错误', {type: 'error'})
            }
          })
        }, () => {})
      }
    },
    computed: {
      nameRules () {
        if (this.addForm.level === 1) {
          return [
            {required: true, message: '请输入菜单名', trigger: 'blur'},
            {max: 5, message: '最多5个字符', trigger: 'blur'}
          ]
        }
        if (this.addForm.level === 2) {
          return [
            {required: true, message: '请输入菜单名', trigger: 'blur'},
            {max: 7, message: '最多7个字符', trigger: 'blur'}
          ]
        }
      }
    },
    mounted () {
      this.handleList()
    }
  }
</script>
<style rel="stylesheet/sass" lang="sass" scoped>
    .form-notice
        color: #C0C4CC
        margin-left: 10px
    .el-table__header-wrapper
        height: 0px

</style>

<style>
    /*去掉2级的头部*/
    #secondLevel .el-table__header {
        display: none !important;
    }

    /*去掉2级的滚动条*/
    #secondLevel .el-table__body-wrapper {
        overflow: hidden;
    }
    /*改变2级的背景色*/
    #secondLevel td {
        background-color: #F6FAFD !important;
    }
    /*去掉2,3级的padding值，是数据位置保持对齐*/
    #firstLevel .el-table__expanded-cell[class*=cell] {
        padding: 0 !important;
    }
    /*去掉上下边框*/
    #firstLevel table tbody div[data-v-5daf6fba], tr[data-v-5daf6fba] {
        border-top: none !important;
        border-bottom: none !important;
    }

    #secondLevel {
        border-top: none !important;
        border-bottom: none !important;
    }


    .el-table th:nth-child(7) {
        width: 300px;
    }

    #secondLevel td:first-child > div {
        padding-left: 43px;
    }

    #secondLevel td:nth-child(2) > div {
        padding-left: 70px;
    }

    #secondLevel td:last-child > div {
        padding-right: -36px;
    }

    #secondLevel td:last-child button {
        margin: 15px;
    }

    #secondLevel td:last-child .cell {
        padding-left: 30px;
    }

    #secondLevel td > div {
        padding-left: 65px;
        margin-left: -12px;
    }

    #secondLevel td:nth-child(1) > div {
        padding-left: 130px;
    }

    #secondLevel td:nth-child(5) > div {
        margin-left: -31px;
    }

    #secondLevel td:nth-child(6) > div {
        margin-left: -35px;
    }

    #secondlevel td:nth-child(7) > div {
        margin-left: -80px;
    }

    #secondLevel td:nth-child(8) > div {
        padding-left: 20px;
    }


</style>